<template>
  <div class="common-layout">
    <el-row style="margin-top: 1vh">
      <el-col :span="6">
        <el-container class="left-container">
          <el-header style="height: 40vh">
            <el-card size="small" class="calendar" shadow="hover">
              <template #header>
                <!-- <div class="calendar-header-tcm"> -->
                <div><span>日产计划：&nbsp;&nbsp;</span><el-text>7451</el-text>&nbsp;吨</div>
                <div><span>可排计划：&nbsp;&nbsp;</span><el-text>4504</el-text>&nbsp;吨</div>
                <!-- </div> -->
              </template>
              <el-calendar ref="calendar" size="small" style="--el-calendar-border: none" />
            </el-card>
          </el-header>
          <el-main style="height: 40vh">
            <el-card style="margin-top: 0.5vh" shadow="hover" class="opa-left-mid-card1">
              <div class="opa-left-mid-card1-header">
                <div><span>当前班组：丁班</span></div>
                <el-button type="primary" size="small">查看考勤</el-button>
              </div>
            </el-card>
            <el-card shadow="hover" class="opa-left-mid-card2">
              <PersonInfoDisplay :direction="'horizontal'" />
            </el-card>
          </el-main>
          <el-footer style="height: 35vh" class="tcm1-left-footer-card">
            <el-card class="technology" shadow="hover">
              <template #header>
                <div style="display: flex; text-align: center; align-items: center; justify-content: center; font-size: 14px">
                  <span>5月工艺符合度</span>
                </div>
              </template>
              <div class="processGap">
                <div>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(75 / 80) * 100">酸温（实际值）：75 </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(75 / 80) * 100" status="warning">酸温（设定值）：75 </el-progress>
                </div>
                <!-- <el-divider /> -->
                <div>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(6.4 / 7) * 100">酸值（实际值）：6.4 </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(6.4 / 7) * 100" status="warning">酸值（设定值）：6.4</el-progress>
                </div>
                <!-- <el-divider /> -->
                <div>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(1100 / 1200) * 100">轧机速度（实际值）：1100 </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(1100 / 1200) * 100" status="warning">
                    轧机速度（设定值）：1100
                  </el-progress>
                </div>
                <!-- <el-divider /> -->
                <div>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(2 / 2.5) * 100">厚度（实际值）：2 </el-progress>
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="(2 / 2.5) * 100" status="warning"> 厚度（设定值）：2 </el-progress>
                </div>
              </div>
            </el-card>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="9">
        <el-container>
          <el-header style="height: 20vh">
            <el-card class="graph-card-tcm" shadow="hover">
              <div class="tcm-mill-unit-radio">
                <el-radio-group
                  v-model="tcmMillUnitRadio"
                  text-color="#626aef"
                  fill="rgb(239, 240, 253)"
                  @change="fetchTCMMillUnitData"
                  size="small"
                  class="radio-position"
                >
                  <el-radio-button label="小时" value="hour" />
                  <el-radio-button label="天" value="day" />
                </el-radio-group>
              </div>
              <prodBarLine
                :data-bar-real="tcmMillUnitReal"
                :data-bar-set="tcmMillUnitSet"
                :data-line="tcmMillUnitLine"
                :datax="tcmMillUnitx"
                :target-roll-counts="tcmTargetRollCounts"
                :actual-roll-counts="tcmActualRollCounts"
              />
            </el-card>
          </el-header>
          <el-main style="height: 62vh">
            <el-card class="tcm1-mid-mid-card1" shadow="hover">
              <template #header>
                <div class="tcm1-mid-mid-card1-header">
                  <div>
                    <el-radio-group v-model="radio" text-color="#626aef" fill="rgb(239, 240, 253)" size="small" @change="getModulesData">
                      <el-radio-button label="成材率" value="yield" />
                      <el-radio-button label="异常切损" value="abnormalCuttingDamage" />
                      <el-radio-button label="度次降" value="degreeReduction" />
                      <el-radio-button label="降级量" value="downgrade" />
                      <el-radio-button label="原品种损失" value="originalVarietyLoss" />
                    </el-radio-group>
                  </div>
                  <div>
                    <el-radio-group v-model="dateRadio1" text-color="#626aef" fill="rgb(239, 240, 253)" size="small" @change="getModulesData">
                      <el-radio-button label="日" value="day" />
                      <el-radio-button label="周" value="week" />
                      <el-radio-button label="月" value="month" />
                    </el-radio-group>
                  </div>
                </div>
              </template>
              <div class="tcm1-mid-mid-card1-graph">
                <GraphBarLine
                  :data-bar-real="tcmMillUnitRealData"
                  :data-bar-set="tcmMillUnitSetData"
                  :data-line="tcmMillUnitLineData"
                  :datax="tcmMillUnitxData"
                  :data-name="['目标', '实际', '达成率']"
                  :y-axis-nmae="['产量', '达成率']"
                ></GraphBarLine>
              </div>
            </el-card>
            <div class="tcm1-mid-mid-card2-graph common-div-card">
              <graph-bar-other
                :data1="speProdSteel1"
                :data2="speProdSteel2"
                :datax="speProdSteelx"
                :title="'当月特种规格钢生产情况'"
                :data-name="['目标', '实际']"
                :max="10000"
                :min="0"
              />
            </div>
          </el-main>
          <el-footer style="height: 28vh">
            <el-card class="tcm1-mid-foot-card" shadow="hover">
              <div class="tcm1-mid-foot-card-graph">
                <graph-bar-other
                  :data1="tcmProfitData1"
                  :data2="tcmProfitData2"
                  :data3="tcmProfitData3"
                  :title="'利润'"
                  :data-name="tcmProfitDataName"
                  :datax="tcmProfitDatax"
                  :max="5"
                  :min="0"
                ></graph-bar-other>
              </div>
            </el-card>
          </el-footer>
        </el-container>
      </el-col>
      <el-col :span="9">
        <el-header style="height: 20vh">
          <el-card class="graph-card-tcm" shadow="hover">
            <graph-bar-other
              :data1="tcmCrewProdData1"
              :data2="tcmCrewProdData2"
              :datax="tcmCrewProdDatax"
              :data-name="tcmCrewProdDataName"
              :title="'酸轧机组各班组产量'"
              :max="22000"
              :min="0"
            />
          </el-card>
        </el-header>
        <el-main style="height: 62vh">
          <el-card class="tcm1-mid-mid-card1" shadow="hover">
            <template #header>
              <div class="tcm1-mid-mid-card1-header">
                <div>
                  <span>非计划停机</span>
                </div>
                <div>
                  <el-radio-group v-model="dateRadio2" text-color="#626aef" fill="rgb(239, 240, 253)" size="small" @change="getUnplannedShutdown">
                    <el-radio-button label="日" value="day" />
                    <el-radio-button label="周" value="week" />
                    <el-radio-button label="月" value="month" />
                  </el-radio-group>
                </div>
              </div>
            </template>
            <div class="tcm1-mid-mid-card1-graph">
              <!--  :max="60" :min="0" -->
              <graph-bar-other
                :data1="tcmUnplannedShutdownData1"
                :data2="tcmUnplannedShutdownData2"
                :data3="tcmUnplannedShutdownData3"
                :data4="tcmUnplannedShutdownData4"
                :datax="tcmUnplannedShutdownDatax"
                :data-name="tcmUnplannedShutdownDataName"
                :title="'非计划停机'"
              />
            </div>
          </el-card>
          <el-card class="tcm1-right-mid-card2" shadow="hover">
            <div style="width: 45%; height: 100%">
              <graph-line :data1="tcmELCCPKData1" :datax="tcmELCCPKDatax" :data-name="tcmELCCPKDataName" :title="'乳化液浓度CPK'" :max="7" :min="0" />
            </div>
            <div style="width: 45%; height: 100%">
              <graph-line :data1="tcmELCCPKData1" :datax="tcmELCCPKDatax" :data-name="tcmELCCPKDataName" :title="'酸温CPK'" :max="7" :min="0" />
            </div>
          </el-card>
        </el-main>
        <el-footer style="height: 28vh" class="footer-table">
          <el-card class="tcm1-right-foot-card" shadow="hover">
            <template #header>
              <div><span>重大事故</span></div>
            </template>
            <el-table
              :data="accidentData"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              v-loading="prodRecordLoading"
              size="small"
            >
              <el-table-column prop="accidentName" label="事故名称" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="date" label="时间" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="responsibleCrew" label="责任机组" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="handlingOpinion" label="处理意见" :show-overflow-tooltip="true" min-width="60px" />
            </el-table>
          </el-card>
          <el-card style="width: 50%" class="tcm1-right-foot-card" shadow="hover">
            <template #header>
              <div><span>重点异议</span></div>
            </template>
            <el-table
              :data="objectionData"
              :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              v-loading="prodRecordLoading"
              size="small"
            >
              <el-table-column prop="objectionName" label="异议名称" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="date" label="时间" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="responsibleCrew" label="责任机组" :show-overflow-tooltip="true" min-width="60px" />
              <el-table-column prop="handlingOpinion" label="处理意见" :show-overflow-tooltip="true" min-width="60px" />
            </el-table>
          </el-card>
        </el-footer>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import GraphBarOther from '../components/GraphBarOther.vue';
  import GraphLine from '../components/GraphLine.vue';
  import PersonInfoDisplay from '../components/PersonInfoDisplay.vue';
  import GraphBarLine from '../components/GraphBarLine.vue';
  import prodBarLine from '../components/prodBarLine.vue';
  import { outputAnalysisApi } from '/@/api/report/TCM2208MillUnit/index';
  import { ElMessage } from 'element-plus';

  const prodRecordLoading = ref(false);
  const radio = ref('yield');
  const tcmMillUnitRadio = ref('hour');
  const dateRadio1 = ref('day');
  const dateRadio2 = ref('day');
  const tcmMillUnitReal = ref<any>([]);
  const tcmMillUnitSet = ref<any>([]);
  const tcmMillUnitLine = ref<any>([]);
  const tcmMillUnitx = ref<any>([]);
  // 仅本页面需求：展示“预测/实际 生产卷数”
  const tcmTargetRollCounts = ref<any>([]);
  const tcmActualRollCounts = ref<any>([]);

  const tcmMillUnitRealData = ref<any>([0]); // 98.27, 98.3, 98.02, 98.2
  const tcmMillUnitSetData = ref<any>([0]); // 98.3, 98.3, 98.3, 98.3
  const tcmMillUnitLineData = ref<any>([0]); // 99.969, 100.0, 99.715, 99.898
  const tcmMillUnitxData = ref<any>(['5月31日']);
  const tcmMYieldmin = ref(0);
  const tcmMYieldmax = ref(0);
  const tcmMProdmin = ref(0);
  const tcmMProdmax = ref(0);

  const speProdSteel1 = ref<any>([]); // 7456, 7456, 7456, 7456
  const speProdSteel2 = ref<any>([]); // 7456, 7456, 7456, 7456
  const speProdSteelx = ref<any>(['外板', '高级别高强', '宽板', '薄料高强']);

  const tcmProfitData1 = ref<any>([]); // 4.3, 2.5, 3.5, 4.5
  const tcmProfitData2 = ref<any>([]); // 2.4, 4.4, 1.8, 2.8
  const tcmProfitData3 = ref<any>([]); // 2, 2, 3, 5
  const tcmProfitDatax = ref<any>([]); // '2月份', '3月份', '4月份', '5月份'
  const tcmProfitDataName = ref<any>(['汽车板', '冷硬板', '高强钢']);
  const tcmCrewProdData1 = ref<any>([]);
  const tcmCrewProdData2 = ref<any>([]);
  const tcmCrewProdDatax = ref<any>([]);
  const tcmCrewProdDataName = ref<any>(['计划', '实际']);

  const tcmUnplannedShutdownData1 = ref<any>([]); // 40, 40, 40, 40, 40, 40
  const tcmUnplannedShutdownData2 = ref<any>([]); // 20, 20, 20, 20, 20, 20
  const tcmUnplannedShutdownData3 = ref<any>([]); // 20, 20, 20, 20, 20, 20
  const tcmUnplannedShutdownData4 = ref<any>([]); // 20, 20, 20, 20, 20, 20
  const tcmUnplannedShutdownDatax = ref<any>([]); // '5月31日', '6月1日', '6月2日', '6月3日', '6月4日', '6月5日'
  const tcmUnplannedShutdownDataName = ref<any>(['总计', '生产', '设备', '其他']);

  const tcmELCCPKData1 = ref<any>([2, 4, 6, 4, 5]);
  const tcmELCCPKDatax = ref<any>(['5月30日', '5月31日', '6月1日', '6月2日', '6月3日']);
  const tcmELCCPKDataName = ref<any>(['酸温']);

  const accidentData = ref<any>([{ accidentName: '酸轧天车钩头掉落', date: '2024-03-06', responsibleCrew: '酸轧', handlingOpinion: '' }]);
  const objectionData = ref<any>([{ objectionName: '比亚迪划伤', date: '2024-03-06', responsibleCrew: '连退', handlingOpinion: '' }]);

  const graphBarLineRef = ref<HTMLElement | null>(null);

  defineExpose({
    graphBarLineRef,
  });

  // -------------------------------------------------------- 接口数据 ---------------------------------------------

  // 酸轧机组产量
  const fetchTCMMillUnitData = async () => {
    const line: any[] = [];
    const real: any[] = [];
    const set: any[] = [];
    const targetCounts: any[] = [];
    const actualCounts: any[] = [];
    const x: string[] = [];
    const param = { dateType: tcmMillUnitRadio.value };
    try {
      const res = await outputAnalysisApi.getTCMMillUnitData(param);
      const list = Array.isArray(res?.data?.data) ? res.data.data : [];
      for (const element of list) {
        line.push(((element.achi ?? 0) * 100).toFixed(2));
        real.push(Number(element.actual ?? 0).toFixed(2));
        set.push(Number(element.target ?? 0).toFixed(2));
        targetCounts.push(element.targetRoll ?? 0);
        actualCounts.push(element.actualRoll ?? 0);
        x.push(element.prodDate);
      }
      tcmMillUnitLine.value = line;
      tcmMillUnitReal.value = real;
      tcmMillUnitSet.value = set;
      tcmMillUnitx.value = x;
      tcmTargetRollCounts.value = targetCounts;
      tcmActualRollCounts.value = actualCounts;
    } catch (error) {
      tcmMillUnitLine.value = [];
      tcmMillUnitReal.value = [];
      tcmMillUnitSet.value = [];
      tcmMillUnitx.value = [];
      tcmTargetRollCounts.value = [];
      tcmActualRollCounts.value = [];
      console.error('获取酸轧机组产量数据失败:', error);
    }
  };

  // 酸轧机组各班组产量
  const fetchTCMCrewProdData = async () => {
    let data1 = [];
    let data2 = [];
    let x: string[] = [];
    await outputAnalysisApi.getTCMCrewProdData().then((res) => {
      res.data.data.forEach((element: any) => {
        data1.push(element.target.toFixed(2));
        data2.push(element.actual.toFixed(2));
        x.push(element.crew);
        tcmCrewProdData1.value = data1;
        tcmCrewProdData2.value = data2;
        tcmCrewProdDatax.value = x;
      });
    });
  };

  // 成材率|异常切损|度次降|降级量|原品种损失
  const getModulesData = async () => {
    try {
      const param = {
        dateType: dateRadio1.value,
        type: radio.value,
      };
      const res = await outputAnalysisApi.getModulesData(param);
      tcmMillUnitxData.value = res.data.data.category;
      tcmMillUnitRealData.value = res.data.data.actual;
      tcmMillUnitSetData.value = res.data.data.target;
      tcmMillUnitLineData.value = res.data.data.achi.map((item: any) => (item * 100).toFixed(2));
    } catch (error) {
      tcmMillUnitxData.value = [];
      tcmMillUnitRealData.value = [];
      tcmMillUnitSetData.value = [];
      tcmMillUnitLineData.value = [];
      console.error(`获取${radio.value}数据失败: `, error);
      ElMessage.error(`获取${radio.value}数据失败 `);
    }
  };

  // 非计划停机
  const getUnplannedShutdown = async () => {
    try {
      const param = {
        dateType: dateRadio2.value,
      };
      const res = await outputAnalysisApi.getTCMUnplannedShutdownData(param);
      tcmUnplannedShutdownData1.value = res.data.data.dursum; // 总计
      tcmUnplannedShutdownData2.value = res.data.data.prodsum; //生产
      tcmUnplannedShutdownData3.value = res.data.data.equsum; // 设备
      tcmUnplannedShutdownData4.value = res.data.data.elssum; // 其他
      tcmUnplannedShutdownDatax.value = res.data.data.shijian; // 日期
    } catch (error) {
      tcmUnplannedShutdownData1.value = []; // 总计
      tcmUnplannedShutdownData2.value = []; //生产
      tcmUnplannedShutdownData3.value = []; // 设备
      tcmUnplannedShutdownData4.value = []; // 其他
      tcmUnplannedShutdownDatax.value = []; // 日期
      console.error('获取非计划停机数据失败:', error);
      ElMessage.error('获取非计划停机数据失败');
    }
  };

  // 特种规格钢生产情况
  const getSpeProdSteel = async () => {
    try {
      const res = await outputAnalysisApi.getSpeProdSteel();
      speProdSteelx.value = res.data.data.category;
      speProdSteel1.value = res.data.data.target;
      speProdSteel2.value = res.data.data.actual;
    } catch (error) {
      speProdSteelx.value = [];
      speProdSteel1.value = [];
      speProdSteel2.value = [];
      console.error('获取特种规格钢生产情况数据失败:', error);
      ElMessage.error('获取特种规格钢生产情况数据失败');
    }
  };

  // 利润
  const getProfit = async () => {
    try {
      const res = await outputAnalysisApi.getProfit();
      tcmProfitData1.value = res.data.data.qiche;
      tcmProfitData2.value = res.data.data.lengying;
      tcmProfitData3.value = res.data.data.gaoqiang;
      tcmProfitDatax.value = res.data.data.category;
    } catch (error) {
      tcmProfitData1.value = [];
      tcmProfitData2.value = [];
      tcmProfitData3.value = [];
      console.error('获取利润数据失败:', error);
      ElMessage.error('获取利润数据失败');
    }
  };

  // 生命周期钩子
  onMounted(() => {
    fetchTCMMillUnitData();
    fetchTCMCrewProdData();
    getModulesData();
    getUnplannedShutdown();
    getSpeProdSteel();
    getProfit();
  });
</script>
<style lang="less" scoped>
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  @border:1px solid #dcdfe6;
  .common-layout {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
    overflow: hidden;
  }

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    border: @border;

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
    }
  }

  // .left-container {
  //   height: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: space-between;
  //   gap: 15px;
  // }

  .processGap {
    display: flex;
    flex-direction: column;
    gap: 6px;

    .el-progress {
      margin-bottom: 5px;
    }

    :deep(.el-divider--horizontal) {
      margin: 10px 0;
    }
  }

  .tcm1-left-footer-card {
    :deep(.el-card .el-card__body) {
      padding: 5px 12px !important;
    }
  }

  .prodBar {
    width: 100%;
    height: 100%;

    :deep(.el-card) {
      height: 40px;

      .el-card__body {
        padding: 0 12px !important;
      }
    }
  }

  .prodPie {
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 100%;
    }
  }

  .inline-block {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
    align-items: center;

    .el-progress {
      width: 80%;
      padding: 0;
    }
  }

  // .calendar-header-tcm {
  //   display: flex;
  //   text-align: center;
  //   align-items: center;
  //   justify-content: space-around;
  //   font-size: 14px;
  //   width: 100%;
  //   // flex: 1;
  //   // margin-left: 10%;
  // }

  :deep(.el-calendar) {
    --el-calendar-cell-width: 2vw;
  }
  :deep(.el-calendar .el-calendar__header) {
    padding: 0 !important;
  }
  :deep(.el-calendar .el-calendar__body) {
    padding: 12px !important;
  }
  :deep(.el-calendar-day) {
    text-align: center;
  }
  .calendar {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
    justify-content: center;

    :deep(.el-card__header) {
      display: flex;
      justify-content: space-between;
      font-size: 12px;

      .el-text {
        color: #e66;
        font-weight: 700;
      }
    }

    :deep(.el-calendar__body) {
      display: inline-block;
      height: 88%;
      padding: 0 !important;
    }

    :deep(.el-card__body) {
      display: flex;
      flex-direction: column;
      padding: 5px 5px;
      justify-content: center;
    }
  }

  .technology {
    :deep(.el-card__header) {
      height: 4vh !important;
      padding: 12px 0 0 0 !important;
    }
  }

  .graph-card-tcm {
    width: 100%;
    height: 100%;

    :deep(.el-card__body) {
      width: 100%;
      height: 100%;
      padding: 5px 5px 0 5px !important;
    }
  }

  .tcm1-mid-mid-card1 {
    height: 30vh;
    width: 100%;
    :deep(.el-card__body) {
      width: 100%;
      height: 100%;
    }

    :deep(.el-card__header) {
      padding: 5px 12px;
    }

    .tcm1-mid-mid-card1-graph {
      height: 20vh;
      width: 100%;
    }
  }

  .tcm1-mid-mid-card2-graph {
    height: 25vh;
    width: 100%;
    margin-top: 1vh;
    box-shadow: @box-shadow;
    border-radius: @border-radius;
  }

  .tcm1-right-mid-card2-graph {
    height: 20vh;
    width: 45%;
    box-shadow: @box-shadow;
    border-radius: @border-radius;
  }

  // .tcm1-mid-mid-card2 {
  //   height: 25vh;
  //   width: 100%;
  //   margin-top: 1vh;

  //   :deep(.el-card__body) {
  //     width: 100%;
  //     height: 100%;
  //     padding: 5px 5px 0 5px !important;
  //   }
  // }

  .tcm1-mid-mid-card1-header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tcm1-mid-foot-card {
    height: 100%;
    width: 100%;
    :deep(.el-card__body) {
      width: 100%;
      height: 100%;
      padding: 5px 5px 0 5px !important;
    }

    .tcm1-mid-foot-card-graph {
      height: 100%;
      width: 100%;
    }
  }

  .tcm1-right-mid-card2 {
    width: 100%;
    height: 25vh;
    flex-wrap: nowrap;
    margin-top: 1vh;

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 100%;
    }
  }

  .footer-table {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
    height: 100%;
  }

  .tcm1-right-foot-card {
    width: 50%;
    max-width: 50%;
    :deep(.el-card__header) {
      height: 3vh !important;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      align-content: center;
    }

    :deep(.el-card__body) {
      padding: 0px !important;
      overflow: hidden;
    }

    :deep(.el-table) {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .opa-left-mid-card1 {
    height: 30%;
    display: flex;
    align-items: center;

    .opa-left-mid-card1-header {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    :deep(.el-card__body) {
      display: flex;
      align-items: center;
      padding: 5px 12px;
      width: 100%;
      height: 100%;
    }
  }

  .opa-left-mid-card2 {
    height: 66%;
    width: 100%;
    display: flex;
    align-items: center;
    :deep(.el-card__body) {
      width: 100%;
      padding: 5px 12px 5px 8px !important;
    }

    .person-info-container {
      width: 100%;
    }
  }

  .tcm-mill-unit-radio {
    position: relative;
    z-index: 10;
  }

  .radio-position {
    right: 1rem;
    position: absolute;
  }
</style>
